<template>
	<view class="oldSearchContent1">
		<view class="list" v-for="(item,index) in oldData">
			<view class="icon" @click="searchList(item)"></view>
			<view class="wb" @click="searchList(item)">{{item.title}}</view>
			<view class="clear" @click="clear(index)"></view>
		</view>
		<view class="clearAll" @click="clearAll" v-if="oldData.length > 0">
			清除所有
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				oldData: []
			}
		},
		beforeMount() {
			var self = this
			self.oldData = uni.getStorageSync('serachOldJson') || []
		},
		methods:{
			clear(index){
				var self = this
				var temp = uni.getStorageSync('serachOldJson')
				temp.splice(index, 1)
				uni.setStorageSync('serachOldJson', temp)
				self.oldData =  uni.getStorageSync('serachOldJson')
			},
			clearAll() {
				var self = this
				var temp = []
				uni.setStorageSync('serachOldJson', temp)
				self.oldData =  uni.getStorageSync('serachOldJson')
			},
			searchList(item) {
				var self = this
				self.$store.dispatch('searchShow/clickSearchSHow', {
					isShowResult: true,
					value: item
				})
			}
		},
		onLoad() {
			
		},
	}
</script>

<style lang="scss" scoped>
	.oldSearchContent1 {
		width: 100%;
		position: absolute;
		top: 74rpx;
		z-index: 100;
		background-color: black;
		.list {
			display: flex;
			width: 90%;
			margin-left: 5%;
			align-items: center;
			height: 40rpx;
			margin-top: 50rpx;
			.icon {
				width: 36rpx;
				height: 30rpx;
				background-size: 28rpx;
				background-repeat: no-repeat;
				background-image: url(../icon/time.png);
				background-position: center;
			}
			
			.wb {
				height: 40rpx;
				width: 75%;
				overflow: hidden;
				color: #DDDBFB;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
			
			.clear {
				width: 80rpx;
				height: 80rpx;
				margin-left: 130rpx;
				background-size: 28rpx;
				background-repeat: no-repeat;
				background-image: url(../icon/clear.png);
				background-position: center;
			}
		}
		.listLast{
			border-bottom: solid 1rpx #1C1B2B;
			padding-bottom: 50rpx;
		}
		.clearAll {
			margin-top: 20rpx;
			height: 80rpx;
			background-size: 28rpx;
			background-repeat: no-repeat;
			background-image: url(../icon/clearIcon.png);
			background-position: 45% center;
			padding-left: 48%;
			line-height: 80rpx;
			color: #747384;
			font-size: 28rpx;
		}
	}
</style>
